<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>统战成员学习平台</title>
    <link rel="stylesheet" type="text/css" href="../css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>

<body>
<div id="app">
    <footer class="ui_border_t" style="z-index: 9999">
        <ul>
            <li @click="switchTab(0)" :class={active:index===0}><img
                    :src="'../image/i_study'+ (index===0?'_pre':'') +'.png'">
                <p>课程</p>
            </li>
            <!--				<li @click="tmp_msg()" :class={active:index===1}><img-->
            <!--						:src="'../image/i_lesson'+ (index===1?'_pre':'') +'.png'">-->
            <!--					<p>资料</p>-->
            <!--				</li>-->
            <li @click="switchTab(2)" :class={active:index===2}><img
                    :src="'../image/i_news'+ (index===2?'_pre':'') +'.png'">
                <p>新闻</p>
            </li>
            <li @click="switchTab(3)" :class={active:index===3}><img
                    :src="'../image/i_dis'+ (index===3?'_pre':'') +'.png'">
                <p>发现</p>
            </li>
            <li @click="switchTab(4)" :class={active:index===4}><img
                    :src="'../image/i_me'+ (index===4?'_pre':'') +'.png'">
                <p>我</p>
            </li>
        </ul>
    </footer>
</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/layer_mobile/layer.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            isLogin: false,
            index: 0,
            indexState: 'light',
            frames: [
                {
                    name: '课程',
                    url: './index_frame1.html'
                },
                {
                    name: '资料',
                    // url: './index_frame2.html'
                },
                {
                    name: '新闻',
                    url: './index_frame3.html'
                },
                {
                    name: '发现',
                    url: './index_frame4.html'
                },
                {
                    name: '我',
                    url: './index_frame5.html'
                }
            ]
        },
        mounted: function () {
            var $this = this;
            apiready = function () {
                sbsm.clear();
                $this.isLogin = isLogin();
                api.setStatusBarStyle({
                    style: 'light'
                });
                // forbidden back event, quite when tigger back munu event
                api.addEventListener({
                    name: 'keyback'
                }, function (ret, err) {
                    api.closeWidget();
                });

                $this.openInitFrames();

                api.addEventListener({
                    name: 'switch_study_tab_event'
                }, function (ret, err) {
                    $this.switchTab(0)
                });
                api.addEventListener({
                    name: 'switch_lesson_tab_event'
                }, function (ret, err) {
                    $this.switchTab(1)
                });
                api.addEventListener({
                    name: 'user_login_logout_event'
                }, function (ret, err) {
                    var userInfo = $api.getStorage(_.USERINFO);
                    $this.isLogin = !!userInfo;
                    $this.switchTab(0);
                });
                //$this.switchTab(0);
                // $this.refreshNewMessageCount();

                api.addEventListener({
                    name: 'openLessonFrameGroup',
                }, function (ret) {
                    $this.openLessonFrameGroup(ret.value.header);
                })

                api.addEventListener({name: 'openNewsFrameGroup'}, function (ret) {
                    $this.openNewsFrameGroup(ret.value.header, ret.value.frames, ret.value.appNewsBanners);
                })

                api.addEventListener({
                    name: EVENT.OPEN_INIT_FRAMES
                },function () {
                    $this.openInitFrames();
                });

            }
        },
        methods: {
            openLessonFrameGroup: function (header) {
                var $this = this;
                var footer_h = $api.offset($api.dom('footer')).h;

                var lessonFrames = [
                    {frameName: 'lesson_frame', url: '/client/course/hotCourseList', name: '热点课程'},
                    {frameName: 'lesson_class_frame', url: '/client/course/courseGenreList', name: '课程资源'},
                    {frameName: 'plan_frame', url: '/client/schedule/selectScheduleList', name: '学习计划'}
                ];
                api.openFrameGroup({
                    name: 'lessonGroup',
                    preload: 2,
                    rect: {
                        x: 0,
                        y: $api.offset(header).h + 1,
                        w: 'auto',
                        h: api.winHeight - footer_h
                    },
                    frames: lessonFrames.map(function (item) {
                        return {
                            bounces: true,
                            name: item.frameName,
                            url: item.frameName + '.html',
                            allowEdit: true,
                            pageParam: {
                                url: item.url
                            }
                        }
                    })
                });
                api.setFrameGroupAttr({
                    name: 'lessonGroup',
                    hidden: false
                });
            },
            switchTab: function (i, skip) {
                var $this = this;
                if (!skip && $this.index === i) return;
                $this.index = i;
                // change statusbar color, ios only
                // sbsm.switch(((i === 0 && $this.isLogin) || i === 4) ? $this.indexState : 'dark');
                if (isLogin()) {
                    if (i === 0) {
                        api.sendEvent({
                            name: i === 0 ? 'open_lesson_group_event' : 'hide_lesson_group_event'
                        });
                    } else {
                        api.closeFrameGroup({
                            name: 'lessonGroup'
                        });
                    }

                    if (i === 2) {
                        api.sendEvent({
                            name: i === 2 ? 'open_news_group_event' : 'hide_news_group_event'
                        });
                    } else {
                        api.closeFrameGroup({
                            name: 'newsGroup'
                        });
                    }

                    if (i === 3) {
                        api.sendEvent({
                            name: 'refresh_newmessagecount_event'
                        });
                    }
                    if (i === 4) {
                        api.sendEvent({
                            name: 'refresh_userInfo_event'
                        });
                    }
                    api.sendEvent({
                        name: i === 4 ? 'open_my_zone_event' : 'hide_my_zone_event'
                    });
                } else {
                    // msgUtil.toast({ msg:'请先登录' });
                    api.sendEvent({
                        name: 'user_login_logout_event'
                    });
                    i = 0;//fixed bug 未登录闪屏
                }
                $this.frames.forEach(function (item, index) {
                    api.setFrameAttr({
                        name: item.url,
                        hidden: index === i ? false : true
                    });
                })
            },
            refreshNewMessageCount: function () {
                var $this = this;
                setInterval(function () {
                    if ($this.isLogin) {
                        api.sendEvent({
                            name: 'refresh_newmessagecount_event'
                        });
                    }
                }, 1000 * 30)
            },
            initPush: function () {
                var ajpush = api.require('ajpush');
                ajpush.init(function (ret) {
                    if (ret && ret.status) {
                        ajpush.setListener(function (ret) {
                            api.notification({
                                notify: {
                                    title: '统战成员学习平台',
                                    content: ret.content,
                                    extra: ret.extra
                                }
                            }, function (ret, err) {
                                api.addEventListener({
                                    name: 'noticeclicked'
                                }, function (ret, err) {
                                    var extra = JSON.parse(ret.value)
                                    openWin('./study/notifyDetail_win', {
                                        id: extra.id,
                                        back: true
                                    })
                                });
                            });
                        });
                    }
                });
            },
            tmp_msg() {
                var $this = this;
                if ($this.isLogin) {
                    msgUtil.toast({
                        msg: '敬请期待...'
                    });
                }
            },
            openNewsFrameGroup: function (header, newsFrames, appNewsBanners) {
                var $this = this;
                api.openFrameGroup({
                    name: 'newsGroup',
                    scrollEnabled: false,
                    preload: 2,
                    rect: {
                        x: 0,
                        y: $api.offset(header).h + 10,
                        w: 'auto',
                        h: api.frameHeight - $api.offset(header).h - 10
                    },
                    frames: newsFrames.map(function (item, i) {
                        return {
                            bounces: true,
                            name: 'frame' + item.newsgenreid,
                            url: 'news/news_frame.html',
                            pageParam: {
                                newsGenreId: item.newsgenreid,
                                pageIndex: i,
                                appNewsBanners: JSON.stringify(appNewsBanners)
                            }
                        }
                    })
                });
            },
            openInitFrames: function () {
                var $this = this;
                var footer_h = $api.offset($api.dom('footer')).h;

                if (isLogin()) {
                    $this.frames.forEach(function (item, index) {
                        if (item.url) {
                            api.openFrame({
                                name: item.url,
                                url: item.url,
                                bounces: false,
                                hScrollBarEnabled: false,
                                vScrollBarEnabled: false,
                                rect: {
                                    x: 0,
                                    y: 0,
                                    w: api.winWidth,
                                    h: api.winHeight - footer_h
                                }
                            });
                        }
                    });
                } else {
                    pageUtil.toLogin();
                }
            }
        }
    });
</script>

</html>
